<template>
  <div ref="chart" style="width: 100%; height: 400px"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const chartRef = ref(null);

onMounted(() => {
  const chart = echarts.init(chartRef.value);

  const option = {
    title: {
      text: "ECR变更来源分布"
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {
      data: ["变更数量", "占比"]
    },
    xAxis: {
      type: "category",
      data: [
        "产品改进",
        "设计缺陷",
        "降本",
        "客户要求",
        "配合供应商",
        "图纸改为与实物一致",
        "产品迭代",
        "产品退市",
        "法令法规",
        "工艺改进"
      ]
    },
    yAxis: [
      {
        type: "value",
        name: "数量",
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: "{value}"
        }
      },
      {
        type: "value",
        name: "占比 (%)",
        min: 0,
        max: 70,
        interval: 10,
        axisLabel: {
          formatter: "{value} %"
        }
      }
    ],
    series: [
      {
        name: "变更数量",
        type: "bar",
        data: [1, 2, 3, 4, 8, 9, 1, 1, 1, 3],
        itemStyle: {
          color: "#4A90E2"
        }
      },
      {
        name: "占比",
        type: "line",
        yAxisIndex: 1,
        data: [10, 20, 30, 40, 50, 60, 10, 20, 30, 40],
        itemStyle: {
          color: "#F5A623"
        }
      }
    ]
  };

  chart.setOption(option);
});
</script>

<style scoped>
/* 添加一些样式以适应您的页面设计 */
</style>
